export default function (ele, fn, img) {
    ele.innerHTML = `                    <div class="_img" onclick="this.firstElementChild.click();" style="position: relative;display: flex;justify-content: center; align-items: center; cursor: pointer; padding: .6rem; height: 100%;">
                        <input type="file" hidden accept="image/*">
                        <div  style="font-size: 2rem; color: #999;text-align: center;"><i style="font-size: 2em;"
                                                                                         class="fa fa-plus"></i><br/>
                            选择图片
                        </div>
                        <img hidden src=""
                             style="max-width: 100%; max-height: 100%; object-fit: cover;border: solid .5rem #FFF;box-shadow: 0 0 1rem #ccc; border-radius: .5rem; overflow: hidden">
                        <progress hidden max="100" style="position: absolute; width: calc(100% - 2rem); bottom: .5rem;left: 1rem;"></progress>
                    </div>`;

    let input = ele.children[0].children[0];
    let div = ele.children[0].children[1];
    let imgEle = ele.children[0].children[2];
    let p = ele.children[0].children[3];

    if(img){
        p.hidden = true;
        div.hidden = true;
        imgEle.hidden = false;
        imgEle.src=img;
    }

    console.debug(input, div, imgEle, p);

    input.onchange = function () {
        if (input.files.length == 0) {
            return;
        }

        let file = input.files[0];
        input.value = "";
        imgEle.src = window.URL.createObjectURL(file);
        p.hidden = false;
        div.hidden = true;
        imgEle.hidden = false;

        let formData = new FormData();//new FormData(form);
        formData.append("img", file);

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    let data = JSON.parse(xhr.responseText);
                    fn(data);
                } else {
                    alert(`上传失败:${xhr.status}`);
                }
                p.hidden = true;//结束上传时隐藏进度条
            }
        }
        xhr.upload.onprogress = function (event) {
            // console.debug(event);
            p.value = event.loaded * 100 / event.total;
        }
        xhr.open("post", "upload.let");
        xhr.send(formData);


    }

}